<link rel="stylesheet" href="index.css">
<style>
	body{background:#1ec46e;}
</style>
<?php
header("Content-type:text/html;charset=utf8");
// echo count($bg);
//===============循环输出背景颜色=================
$color=array("red","orange","yellow","green","blue","purple","white","grey","black");//颜色的种类
$num=array(9,7,5,3,1,null,-1,-3,-5,-7,-9);//在基础色上面加减，
echo "<span class='db w100 h20 lh20 tex fw fs20 bgwhite-1 '>背景颜色</span>";
foreach($color as $cl){
   foreach($num as $v){
	 echo "<a class='bg".$cl.$v." db w70 l ml5 mt10 tex h30 lh30 fw cur br'>"."bg".$cl.$v." </a>";
			}
	echo "<span class='h30 bg".$cl.$v." w100 db l lh30 tex ml30 mt10 cur'>基础色（".$cl."）</span>";
	echo "<br><br><br>";  
	           }
echo "<br/><br/><br/>";
echo "<hr/>";
//================循环输出字体颜色================
echo "<span class='db w100 h20 lh20 tex fw fs20 bgwhite-1 '>字体颜色</span>";
foreach($color as $cl){
   foreach($num as $v){
	 echo "<a class='c".$cl.$v." db w70 l ml5 mt10 tex h30 lh30 fw cur br'>"."c".$cl.$v." </a>";
			}
	echo "<span class='h30 c".$cl.$v." w100 db l lh30 tex ml30 mt10 cur'>基础色（".$cl."）</span>";
	echo "<br><br><br>";  
	           }
echo "<br/><br/><br/>";
echo "<hr/>";
//===============循环创建背景颜色=================
foreach($color as $cl){
	foreach($num as $v){
		if($v>0){
			echo ".bg".$cl.$v."{background:(@".$cl.")+".$v."0;}<br>";
		}else if(is_null($v)){
			echo ".bg".$cl.$v."{background:(@".$cl.")".$v."}<br>";
		}else{
			echo ".bg".$cl.$v."{background:(@".$cl.")".$v."0;}<br>";
		}
	}
}
//==============创建字体颜色=====================
foreach($color as $cl){
	foreach($num as $v){
		if($v>0){
			echo ".c".$cl.$v."{color:(@".$cl.")+".$v."0;}<br>";
		}else if(is_null($v)){
			echo ".c".$cl.$v."{color:(@".$cl.")".$v."}<br>";
		}else{
			echo ".c".$cl.$v."{color:(@".$cl.")".$v."0;}<br>";
		}
	}
}



//颜色
.bgred9{background:(@red)+90;}
.bgred7{background:(@red)+70;}
.bgred5{background:(@red)+50;}
.bgred3{background:(@red)+30;}
.bgred1{background:(@red)+10;
}
.bgred{background:(@red)}
.bgred-1{background:(@red)-10;}
.bgred-3{background:(@red)-30;}
.bgred-5{background:(@red)-50;}
.bgred-7{background:(@red)-70;}
.bgred-9{background:(@red)-90;}
.bgorange9{background:(@orange)+90;}
.bgorange7{background:(@orange)+70;}
.bgorange5{background:(@orange)+50;}
.bgorange3{background:(@orange)+30;}
.bgorange1{background:(@orange)+10;}
.bgorange{background:(@orange)}
.bgorange-1{background:(@orange)-10;}
.bgorange-3{background:(@orange)-30;}
.bgorange-5{background:(@orange)-50;}
.bgorange-7{background:(@orange)-70;}
.bgorange-9{background:(@orange)-90;}
.bgyellow9{background:(@yellow)+90;}
.bgyellow7{background:(@yellow)+70;}
.bgyellow5{background:(@yellow)+50;}
.bgyellow3{background:(@yellow)+30;}
.bgyellow1{background:(@yellow)+10;}
.bgyellow{background:(@yellow)}
.bgyellow-1{background:(@yellow)-10;}
.bgyellow-3{background:(@yellow)-30;}
.bgyellow-5{background:(@yellow)-50;}
.bgyellow-7{background:(@yellow)-70;}
.bgyellow-9{background:(@yellow)-90;}
.bggreen9{background:(@green)+90;}
.bggreen7{background:(@green)+70;}
.bggreen5{background:(@green)+50;}
.bggreen3{background:(@green)+30;}
.bggreen1{background:(@green)+10;}
.bggreen{background:(@green)}
.bggreen-1{background:(@green)-10;}
.bggreen-3{background:(@green)-30;}
.bggreen-5{background:(@green)-50;}
.bggreen-7{background:(@green)-70;}
.bggreen-9{background:(@green)-90;}
.bgblue9{background:(@blue)+90;}
.bgblue7{background:(@blue)+70;}
.bgblue5{background:(@blue)+50;}
.bgblue3{background:(@blue)+30;}
.bgblue1{background:(@blue)+10;}
.bgblue{background:(@blue)}
.bgblue-1{background:(@blue)-10;}
.bgblue-3{background:(@blue)-30;}
.bgblue-5{background:(@blue)-50;}
.bgblue-7{background:(@blue)-70;}
.bgblue-9{background:(@blue)-90;}
.bgpurple9{background:(@purple)+90;}
.bgpurple7{background:(@purple)+70;}
.bgpurple5{background:(@purple)+50;}
.bgpurple3{background:(@purple)+30;}
.bgpurple1{background:(@purple)+10;}
.bgpurple{background:(@purple)}
.bgpurple-1{background:(@purple)-10;}
.bgpurple-3{background:(@purple)-30;}
.bgpurple-5{background:(@purple)-50;}
.bgpurple-7{background:(@purple)-70;}
.bgpurple-9{background:(@purple)-90;}
.bgwhite9{background:(@white)+90;}
.bgwhite7{background:(@white)+70;}
.bgwhite5{background:(@white)+50;}
.bgwhite3{background:(@white)+30;}
.bgwhite1{background:(@white)+10;}
.bgwhite{background:(@white)}
.bgwhite-1{background:(@white)-10;}
.bgwhite-3{background:(@white)-30;}
.bgwhite-5{background:(@white)-50;}
.bgwhite-7{background:(@white)-70;}
.bgwhite-9{background:(@white)-90;}
.bggrey9{background:(@grey)+90;}
.bggrey7{background:(@grey)+70;}
.bggrey5{background:(@grey)+50;}
.bggrey3{background:(@grey)+30;}
.bggrey1{background:(@grey)+10;}
.bggrey{background:(@grey)}
.bggrey-1{background:(@grey)-10;}
.bggrey-3{background:(@grey)-30;}
.bggrey-5{background:(@grey)-50;}
.bggrey-7{background:(@grey)-70;}
.bggrey-9{background:(@grey)-90;}
.bgblack9{background:(@black)+90;}
.bgblack7{background:(@black)+70;}
.bgblack5{background:(@black)+50;}
.bgblack3{background:(@black)+30;}
.bgblack1{background:(@black)+10;}
.bgblack{background:(@black)}
.bgblack-1{background:(@black)-10;}
.bgblack-3{background:(@black)-30;}
.bgblack-5{background:(@black)-50;}
.bgblack-7{background:(@black)-70;}
.bgblack-9{background:(@black)-90;}
.cred9{color:(@red)+90;}
.cred7{color:(@red)+70;}
.cred5{color:(@red)+50;}
.cred3{color:(@red)+30;}
.cred1{color:(@red)+10;}
.cred{color:(@red)}
.cred-1{color:(@red)-10;}
.cred-3{color:(@red)-30;}
.cred-5{color:(@red)-50;}
.cred-7{color:(@red)-70;}
.cred-9{color:(@red)-90;}
.corange9{color:(@orange)+90;}
.corange7{color:(@orange)+70;}
.corange5{color:(@orange)+50;}
.corange3{color:(@orange)+30;}
.corange1{color:(@orange)+10;}
.corange{color:(@orange)}
.corange-1{color:(@orange)-10;}
.corange-3{color:(@orange)-30;}
.corange-5{color:(@orange)-50;}
.corange-7{color:(@orange)-70;}
.corange-9{color:(@orange)-90;}
.cyellow9{color:(@yellow)+90;}
.cyellow7{color:(@yellow)+70;}
.cyellow5{color:(@yellow)+50;}
.cyellow3{color:(@yellow)+30;}
.cyellow1{color:(@yellow)+10;}
.cyellow{color:(@yellow)}
.cyellow-1{color:(@yellow)-10;}
.cyellow-3{color:(@yellow)-30;}
.cyellow-5{color:(@yellow)-50;}
.cyellow-7{color:(@yellow)-70;}
.cyellow-9{color:(@yellow)-90;}
.cgreen9{color:(@green)+90;}
.cgreen7{color:(@green)+70;}
.cgreen5{color:(@green)+50;}
.cgreen3{color:(@green)+30;}
.cgreen1{color:(@green)+10;}
.cgreen{color:(@green)}
.cgreen-1{color:(@green)-10;}
.cgreen-3{color:(@green)-30;}
.cgreen-5{color:(@green)-50;}
.cgreen-7{color:(@green)-70;}
.cgreen-9{color:(@green)-90;}
.cblue9{color:(@blue)+90;}
.cblue7{color:(@blue)+70;}
.cblue5{color:(@blue)+50;}
.cblue3{color:(@blue)+30;}
.cblue1{color:(@blue)+10;}
.cblue{color:(@blue)}
.cblue-1{color:(@blue)-10;}
.cblue-3{color:(@blue)-30;}
.cblue-5{color:(@blue)-50;}
.cblue-7{color:(@blue)-70;}
.cblue-9{color:(@blue)-90;}
.cpurple9{color:(@purple)+90;}
.cpurple7{color:(@purple)+70;}
.cpurple5{color:(@purple)+50;}
.cpurple3{color:(@purple)+30;}
.cpurple1{color:(@purple)+10;}
.cpurple{color:(@purple)}
.cpurple-1{color:(@purple)-10;}
.cpurple-3{color:(@purple)-30;}
.cpurple-5{color:(@purple)-50;}
.cpurple-7{color:(@purple)-70;}
.cpurple-9{color:(@purple)-90;}
.cwhite9{color:(@white)+90;}
.cwhite7{color:(@white)+70;}
.cwhite5{color:(@white)+50;}
.cwhite3{color:(@white)+30;}
.cwhite1{color:(@white)+10;}
.cwhite{color:(@white)}
.cwhite-1{color:(@white)-10;}
.cwhite-3{color:(@white)-30;}
.cwhite-5{color:(@white)-50;}
.cwhite-7{color:(@white)-70;}
.cwhite-9{color:(@white)-90;}
.cgrey9{color:(@grey)+90;}
.cgrey7{color:(@grey)+70;}
.cgrey5{color:(@grey)+50;}
.cgrey3{color:(@grey)+30;}
.cgrey1{color:(@grey)+10;}
.cgrey{color:(@grey)}
.cgrey-1{color:(@grey)-10;}
.cgrey-3{color:(@grey)-30;}
.cgrey-5{color:(@grey)-50;}
.cgrey-7{color:(@grey)-70;}
.cgrey-9{color:(@grey)-90;}
.cblack9{color:(@black)+90;}
.cblack7{color:(@black)+70;}
.cblack5{color:(@black)+50;}
.cblack3{color:(@black)+30;}
.cblack1{color:(@black)+10;}
.cblack{color:(@black)}
.cblack-1{color:(@black)-10;}
.cblack-3{color:(@black)-30;}
.cblack-5{color:(@black)-50;}
.cblack-7{color:(@black)-70;}
.cblack-9{color:(@black)-90;}




























// for($i=0;$i<20;$i++){
// 	if($i==0){
// 		echo "<a class='bgred db w50 l ml5 mt10 tex h30 lh30 fw'>"."bgred</a>";
// 	}else{
// 		echo "<a class='bgred".$i." db w50 l ml5 mt10 tex h30 lh30 fw'>"."bgred".$i." </a>";
// 	}
// }
// echo "<br><br><br>";
// for($i=0;$i<20;$i++){
// 	if($i==0){
// 		echo ".bgred{background:(@red);}<br>";
// 	}else{
// 		echo ".bgred".$i."{background:(@red)+".$i."0;}<br>";
// 	}
// }









